<!--
 * @Descripttion: 文件说明
 * @version: V1.0
 * @Author: GW
 * @Date: 2021-07-29 10:40:40
 * @LastEditors: GW
 * @LastEditTime: 2022-06-11 10:01:57
-->
<template>
    <a-sub-menu :key="menuInfo.id" :sub-menu-close-delay="0.1" v-bind="$props" v-on="$listeners">
        <div slot="title">
            <i class="ant-menu-icon nav-icon " :class="menuInfo.meta.icon" /><span v-show="!collapsed">{{menuInfo.meta.name || menuInfo.name || ""}}</span>
        </div>
        <template v-for="(item,index) in menuInfo.children">
            <a-menu-item :title="item.name" :key="item.id" @mouseenter="menuMouserover(item,'fatherBox'+item.id)" @mouseout.stop="menuMouserout">
                <div :ref="'fatherBox' + item.id">
                    <div v-if="item.path">
                        <router-link :to="item.path">
                            <i class="ant-menu-icon nav-icon " :class="item.meta.icon" /><span>{{item.meta.name || item.name || ""}}</span>
                        </router-link>
                    </div>
                    <div v-else>
                        <a>
                            <i class="ant-menu-icon nav-icon " :class="item.meta.icon" /><span>{{item.meta.name || item.name || ""}}</span>
                        </a>
                    </div>
                </div>
            </a-menu-item>
        </template>
    </a-sub-menu>
</template>

<script>
import { Menu } from 'ant-design-vue';
import MiddleUtils from '@/utils/middle-utils';
export default {
    name: "SubMenu",
    isSubMenu: true,
    props: {
        ...Menu.SubMenu.props,
        // Cannot overlap with properties within Menu.SubMenu.props
        menuInfo: {
            type: Object,
            default: () => ({}),
        },
    },
    methods: {
        menuMouserover (data, ref) {
            let position = this.$refs[`${ref}`][0].getBoundingClientRect();
            MiddleUtils.$emit('backMenuData', {
                data: data,
                position: position
            });
        },
        menuMouserout () {
            console.log('mouserout')
            //  MiddleUtils.$emit('menuMouserout');
        }
    }
}
</script>

<style lang="less" scoped>
</style>